<template>
  <div style="padding:15px;">
    <vxe-toolbar :id="'toolbarId_tr'+keys" :custom="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="funcFilter">查询</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="700"
      :loading="loading"
      :data="tableData"
      show-footer
      :footer-method="footerMethod"
      :sort-config="{ remote: true }"
      export-config
      show-overflow
      align="center"
      @sort-change="sortList"
    >
      <vxe-table-column type="checkbox" width="60"  fixed="left" />
      <vxe-table-column>
        <vxe-table-column
          field="orderCode"
          title="运输单号"
          min-width="250"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.orderCode" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="mainOrderNumber"
          title="货源单号"
          min-width="250"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.mainOrderNumber" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="ordCreatedByName" title="下单客户" min-width="130" sortable/>
        <template v-slot:header>
          <el-input v-model="listQuery.ordCreatedByName" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="status"
          title="状态"
          :formatter="formatterStatus"
          min-width="130"
          sortable
        />
        <template v-slot:header>
          <el-select v-model="listQuery.status" clearable placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="coalTypeName" title="货物类型" min-width="130" sortable/>
        <template v-slot:header>
          <el-input v-model="listQuery.coalTypeName" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="coalName" title="运输要求" min-width="130" sortable/>
        <template v-slot:header>
          <el-input v-model="listQuery.coalName" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column v-if="this.partyType !== 'DRIVER'">
        <vxe-table-column field="taxPrice" title="入驻商成交单价" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.taxPriceStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.taxPriceEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column v-if="this.partyType !== 'SHIPMENT' && this.partyType !== 'SHIPMENT_COMPANY'">
        <vxe-table-column field="realPrice" title="司机承运单价" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.realPriceStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.realPriceEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="shipperDeliveryFee" title="入驻商实付运费(元)" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.shipperDeliveryFeeStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.shipperDeliveryFeeEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column v-if="this.partyType !== 'SHIPMENT' && this.partyType !== 'SHIPMENT_COMPANY'">
        <vxe-table-column field="deliveryFeePractical" title="司机实收运费(元)" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.deliveryFeePracticalStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.deliveryFeePracticalEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="taxFee" title="含税总价(元)" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.taxFeeStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.taxFeeEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="taxPayFee" title="纳税金额(元)" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.taxPayFeeStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.taxPayFeeEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="coalPrice" title="货物单价" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.coalPriceStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.coalPriceEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="maxPrice" title="最高价" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.maxPriceStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.maxPriceEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="distance" title="公里数(公里)" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.distanceStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.distanceEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="deliveryOilFee" title="油气卡(元)" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.deliveryOilFeeStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.deliveryOilFeeEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="weight" title="接单数量" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.weightStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.weightEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="loadQuantity" title="装车数量" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.loadQuantityStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.loadQuantityEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="unloadQuantity" title="卸车数量" min-width="200" sortable/>
        <template v-slot:header>
          <el-row>
            <el-col :span="11">
              <el-input type="number" v-model="listQuery.unloadQuantityStart" placeholder="下限" clearable/>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-input type="number" v-model="listQuery.unloadQuantityEnd" placeholder="上限" clearable/>
            </el-col>
          </el-row>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="placeOfShipment"
          title="装货地址"
          min-width="450"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.placeOfShipment" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="placeOfReceipt"
          title="收货地址"
          min-width="450"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.placeOfReceipt" placeholder="请输入" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="lastLoadingTime" title="截止装车时间" min-width="420" sortable/>
        <template v-slot:header>
          <el-date-picker
            v-model="lastLoadingTimeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'lastLoadingTime')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="fillTime" title="装车时间" min-width="420" sortable/>
        <template v-slot:header>
          <el-date-picker
            v-model="fillTimeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'fillTime')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="lastUnloadingTime" title="截止卸车时间" min-width="420" sortable/>
        <template v-slot:header>
          <el-date-picker
            v-model="lastUnloadingTimeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'lastUnloadingTime')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="signTime" title="卸车时间" min-width="420" sortable/>
        <template v-slot:header>
          <el-date-picker
            v-model="signTimeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'signTime')"
          />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="gmtCreated" title="创建时间" min-width="420" sortable/>
        <template v-slot:header>
          <el-date-picker
            v-model="gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            style="width:100%"
            range-separator="至"

            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="value => changeDate(value, 'gmtCreated')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column field="profitFee"  title="利润" min-width="200" sortable/>
      <vxe-table-column field="profitFeeFate"  title="利润率" min-width="100" sortable/>
      <vxe-table-column field="action" title="操作" min-width="50" fixed="right">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" placement="top" width="50">
            <vxe-button type="text" @click="orderDesil(scope.row.code)">
              <i class="el-icon-edit" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-sizes="Pagingconf"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
    <vxe-modal v-model="tuteship" title="运输单详情" width="1000" height="700" resize>
      <ordergoods ref="detailRef" />
    </vxe-modal>
  </div>
</template>

<script>
  import request from "@/utils/request";
  import {SelectAddress} from "@/api/orderform";
  import {getGoodsTypeDict} from "@/api/shipment";
  import {orderDetailList} from "@/api/transport";
  import ordergoods from "@/components/WaybillDetails";
  export default {
    name: "orderDeyailList",
    components:{
      ordergoods
    },
    props:{
      //是否是税收页面查看
      isStatistics:{
        type:Number,
        default:0 //否
      },
      partyCode: {
        type: String,
        default:'' //否
      },
      isShipment: {
        type: Boolean,
        default:void 0 //否
      },
      keys:{
        type: [String,Number],
        default:'toolbarId_tr'
      }
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        },
        //columnVisible:true,//是否隐藏
        loading: false,
        tuteship: false,
        tableData: [],
        areaOptions: [],
        goodsTypeList: [],
        consignorAreaList: [],
        consigneeAreaList: [],
        lastLoadingTimeRange: "",
        fillTimeRange: "",
        lastUnloadingTimeRange: "",
        signTimeRange: "",
        gmtCreatedRange: "",
        gmtModifiedRange: "",
        partyType: "",
        listQuery: {
          status:'',
          pageNum: 1,
          pageSize: 20,
          sortField: "",
          sortType: "",
          total: 0,
          isStatistics:this.isStatistics,
          profitFee:"",
          profitFeeFate:"",
          orderCreateBy:"",
          createdBy:""
        },
        Pagingconf: [],
        sumObject: {},
        statusOptions: [
          {value: 1, label: "已接单"},
          {value: 2, label: "已装货"},
          {value: 3, label: "已卸货"},
          {value: 4, label: "已结算"},
          {value: 5, label: "已打款"}
        ]
      }
    },
    watch:{
      keys(){
        return this.show()
      },
    },
    created() {
      this.initStatusOptions();
      // 省市县
      SelectAddress().then(response => {
        this.areaOptions = response.data.records;
      });
      // 货物类型
      getGoodsTypeDict({ parentCode: "goodsBigType" }).then(response => {
        this.goodsTypeList = response.data.records;
      });
      this.findList();
    },
    methods: {
      show(){
        this.tableData = []
        this.listQuery.pageNum = 1
        this.partyType = this.$store.getters.party.partyType;
        if(this.isShipment!==void 0 && this.partyCode!==''){
          if(this.isShipment){
            this.listQuery.orderCreateBy = this.partyCode;
          }else {
            this.listQuery.createdBy = this.partyCode;
          }
        }
        this.findList();
      },
      findList() {
        this.loading = true;
        return new Promise(resolve => {
          orderDetailList(this.listQuery).then(response => {
            this.tableData = response.data.records;
            this.tableData.forEach(item => {
              item.price = item.price + item.isTrunkName
              item.taxPrice = item.taxPrice + item.isTrunkName
              item.realPrice = item.realPrice + item.isTrunkName
              item.coalPrice = item.coalPrice + '元/'+ item.coalUnitName
              item.maxPrice = item.maxPrice + item.isTrunkName
              item.weight = item.weight + item.coalUnitName
            })
            this.listQuery.total = response.data.total;
            this.Pagingconf = [20,30,50,100,response.data.total];
            this.sumObject = response.data.sumObject;
            this.loading = false;
            resolve();
          });
        });
      },
      // 查询
      funcFilter() {
        this.listQuery.pageNum = 1;
        this.findList();
      },
      handlePageChange({ currentPage, pageSize }) {
        this.listQuery.pageNum = currentPage;
        this.listQuery.pageSize = pageSize;
        this.findList();
      },
      orderDesil(c) {
        this.$refs.detailRef.Getdetails(c);
        this.tuteship = true;
      },
      // 装货/收货地址
      changeAreaList(value, prefix) {
        if (value.length > 0) {
          this.listQuery[`${prefix}SubdivisionCode`] = value[2];
        } else {
          this.listQuery[`${prefix}SubdivisionCode`] = "";
        }
      },
      // 类型
      handleChangeCoalType(value) {
        if (value.length > 0) {
          var newValue = value.slice(0);
          this.listQuery.coalType = newValue.pop();
        } else {
          this.listQuery.coalType = "";
        }
      },
      // 翻译状态
      formatterStatus({ cellValue }) {
        const item = this.statusOptions.find(item => item.value === cellValue);
        return item ? item.label : "";
      },
      // 排序
      sortList({ column, property, order }) {
        if (order) {
          this.listQuery.sortField = property;
          this.listQuery.sortType = order;
        } else {
          this.listQuery.sortField = "";
        }
        this.findList();
      },
      // 时间区间
      changeDate(value, prefix) {
        if (value) {
          this.listQuery[`${prefix}Start`] = value[0] + " 00:00:00";
          this.listQuery[`${prefix}End`] = value[1] + " 23:59:59";
        } else {
          this.listQuery[`${prefix}Start`] = "";
          this.listQuery[`${prefix}End`] = "";
        }
      },
      footerMethod({ columns, data }) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 0) {
              return "合计";
            }
            if (column.property === "deliveryFeePractical") {
              return this.sumObject.deliveryFeePractical;
            }
            if (column.property === "shipperDeliveryFee") {
              return this.sumObject.shipperDeliveryFee;
            }
            if (column.property === "taxFee") {
              return this.sumObject.taxFee;
            }
            if (column.property === "taxPayFee") {
              return this.sumObject.taxPayFee;
            }
            if (column.property === "distance") {
              return this.sumObject.distance;
            }
            if (column.property === "deliveryOilFee") {
              return this.sumObject.deliveryOilFee;
            }
            if (column.property === "weight") {
              return this.sumObject.ton + "吨//" + this.sumObject.cubicMeter + "方//" + this.sumObject.pieces + "件";
            }
            if (column.property === "loadQuantity") {
              return this.sumObject.loadQuantityTon + "吨//" + this.sumObject.loadQuantityCubicMeter + "方//" + this.sumObject.loadQuantityPieces + "件";
            }
            if (column.property === "unloadQuantity") {
              return this.sumObject.unloadQuantityTon + "吨//" + this.sumObject.unloadQuantityCubicMeter + "方//" + this.sumObject.unloadQuantityPieces + "件";
            }
            return "-";
          })
        ];
      },
      initStatusOptions(){
        if(this.isStatistics == 1){
          this.statusOptions = [
            {value: 4, label: "已结算"},
            {value: 5, label: "已打款"}
          ]
        }
      }
    }
  }

</script>

<style scoped>

</style>
